<div class="row">
    <div class="col-sm-12"> 
    <table class="table table-hover table-striped table-bordered table-multiple" [busyIf]="loading">
        <thead>
            <tr>
                <th colspan="6">
                    <span>{{templateInfo.description}}</span>
                </th>
                <th>
                    <button class="btn btn-xs2 btn-warning  mr-1"  *ngIf="permission" type="button" 
                        (click)="batchDelete()">
                        全部删除
                    </button>
                </th>
            </tr>
            <tr>
                <th style="width:5%;max-width:150px"></th>
                <th style="width:25%;max-width:350px"></th>
                <th style="width:8%"></th>
                <th style="width:15%;max-width:180px"></th>
                <th style="width:6%">{{"Order" | localize}}</th>
                <th style="width:13%">{{"CreationTime" | localize}}</th>
                <th style="width:16%">{{"Actions" | localize}}</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let item of fileInfos">
                <td style="vertical-align:middle">
                    <div [hidden]="item.icon">
                        <!--TODO做图片预览-->
                        <a (click)="lookOver(getUrl(item))" href="javascript:">
                            <img class="bg-gray" [attr.src]="getSmallUrl(item)" style="max-height:80px;max-width:100px" />
                        </a>
                    </div>
                    <div [hidden]="!item.icon">
                        <a target="_blank" [attr.href]="getDownUrl(item)">
                            <i [ngClass]="item.icon" style="font-size:35px;line-height: 35px;"></i>
                        </a>
                    </div>
                </td>
                <td style="vertical-align:middle;width:25%;max-width:350px">
                    <a [hidden]="item.icon" class="text-muted"  (click)="lookOver(getUrl(item))" href="javascript:">{{item.fileName}}</a>
                    <a [hidden]="!item.icon" class="text-muted" target="_blank" [attr.href]="getDownUrl(item)">{{item.fileName}}</a>
                </td>
                <td style="vertical-align:middle">{{item.size}}</td>
                <td style="vertical-align:middle;">
                    {{item.title}}
                </td>
                <td style="vertical-align:middle;width:15%;max-width:180px">
                    <input style="width:50px;" value="{{item.order}}" (change)="changeOrder($event,item)" />
                </td>
                <td style="vertical-align:middle">
                    {{item.creationTime | luxonFormat:'yyyy-MM-dd HH:mm:ss'}}
                </td>
                <td style="vertical-align:middle">
                    <div [hidden]="!permission || !item.status">
                        <a href="javascript:void(0)" class="mr-1" *ngIf="permission" (click)="update(item)" title="{{'Edit' | localize}}">
                            <i class="fa fa-edit text-info"></i>
                        </a>
                        <a href="javascript:void(0)" class="mr-1" *ngIf="permission" (click)="delete(item)" title="{{'Delete' | localize}}">
                            <i class="fa ion-close text-info"></i>
                        </a>
                        <a href="javascript:void(0)" *ngIf="permission && item.isActive" class="mr-1" (click)="cancelReleaseState(item)" title="{{'CancelRelease' | localize}}">
                            <i class="fa fa-undo text-info"></i>
                        </a>
                        <a href="javascript:void(0)" *ngIf="permission && !item.isActive" class="mr-1" (click)="releaseState(item)" title="{{'Release' | localize}}">
                            <i class="fa fa-book text-info"></i>
                        </a>
                        <a href="javascript:void(0)" class="mr-1" *ngIf="permission" (click)="upsort(item)" title="{{'UpSort' | localize}}">
                            <i class="fa fa-arrow-up text-info" ></i>
                        </a>
                        <a href="javascript:void(0)"  *ngIf="permission" (click)="downSort(item)" title="{{'DownSort' | localize}}">
                            <i class="fa fa-arrow-down text-info" ></i>
                        </a>
                    </div>
                </td>
            </tr>


            <tr *ngIf="uploadingFile">
                <td style="vertical-align:middle">
                    <div *ngIf="!uploadingFile.icon">
                        <!--TODO做图片预览-->
                        <img class="bg-gray" src="{{uploadingFile.dataUrl}}" style="max-height:80px;max-width:100px" />
                    </div>
                    <div *ngIf="uploadingFile.icon">
                        <i [ngClass]="uploadingFile.icon" style="font-size:35px;line-height: 35px;"></i>
                    </div>
                </td>
                <td style="vertical-align:middle">
                    {{uploadingFile.file.name}}
                </td>
                <td style="vertical-align:middle">{{uploadingFile.fileSizeStr}}</td>
                <td style="vertical-align:middle">
                    <div *ngIf="showProgressBar">
                        <div class="progress progress-xs col-sm-9">
                            <div class="progress-bar progress-bar-primary" [ngStyle]="{'width': uploadProgress +'%'}"></div>
                        </div>
                        <span class="badge bg-light-blue col-sm-3">{{uploadProgress}}%</span>
                    </div>
                </td>
                <td style="vertical-align:middle">
                </td>
                <td style="vertical-align:middle">
                </td>
                <td style="vertical-align:middle">
                    <button type="button" class="btn btn-xs btn-danger mr-1" (click)="cancelUploadingItem()" title="{{'Cancel' | localize}}">
                        <span class="fa fa-fw ion-close"></span>
                    </button>
                </td>
            </tr>

            <tr *ngFor="let item of ReadyFiles; let i = index">
                <td style="vertical-align:middle">
                    <div *ngIf="!item.icon">
                        <!--TODO做图片预览-->
                        <img class="bg-gray" src="{{item.dataUrl}}" style="max-height:80px;max-width:100px" />
                    </div>
                    <div *ngIf="item.icon">
                        <i [ngClass]="item.icon" style="font-size:35px;line-height: 35px;"></i>
                    </div>
                </td>
                <td style="vertical-align:middle">
                    {{item.file.name}}
                </td>
                <td style="vertical-align:middle">{{item.fileSizeStr}}</td>
                <td style="vertical-align:middle">
                    <div>
                        <div class="progress progress-xs col-sm-9">
                            <div class="progress-bar progress-bar-primary" [ngStyle]="{'width': '0%'}"></div>
                        </div>
                        <span class="badge bg-light-blue col-sm-3">0%</span>
                    </div>
                </td>
                <td style="vertical-align:middle">
                </td>
                <td style="vertical-align:middle">
                </td>
                <td style="vertical-align:middle">
                    <button type="button" class="btn btn-xs btn-danger mr-1" (click)="cancelFromQueue(i)" title="{{'Cancel' | localize}}">
                        <span class="fa fa-fw ion-close"></span>
                    </button>
                </td>
            </tr>
        </tbody>
    </table>
    </div>
    <div class="col-sm-12">
        <!--<div class="beforeDrop" ng2FileDrop [ngClass]="{dropping: isDropZoneOver}" (fileOver)="fileOverBase($event)" (onFileDrop)="fileDropOver($event)">

        </div>-->
        <div class="btn btn-sm btn-primary btn-file mr-1"  *ngIf="permission">
            <i class="fa fa-folder-open"></i>
            <span class="hidden-xs">{{"Upload" | localize}}</span>
            <input type="file"  (change)="fileChangeEvent($event)" [disabled]="!permission " multiple="multiple" />
        </div>
        <div class="btn btn-sm btn-primary mr-1" (click)="pickupFile()"  *ngIf="permission">
            <i class="fa fa-remove"></i>
            <span class="hidden-xs">文件库</span>
        </div>
        <div class="btn btn-sm btn-warning" (click)="abortUpload()"  *ngIf="permission">
            <i class="fa fa-remove"></i>
            <span class="hidden-xs">{{"Cancel" | localize}}</span>
        </div>
    </div>
</div>